{% extends 'base.html' %}
{% block title %}详情{% endblock %}

{% block head %}
    <link rel="stylesheet" href="{% static 'highlight/styles/github-dark.min.css' %}">
    <script src="{% static 'highlight/highlight.min.js' %}"></script>
{% endblock %}


{% block main %}
    <div class="max-w-3xl mx-auto">
        <h1 class="text-3xl fw-bold mb-4 text-dark">{{ blog.title }}</h1>
        <hr class="my-4 border-secondary">
        <div class="mt-2 mb-6 d-flex items-center flex-wrap gap-3 text-sm text-muted">
            <img src="{{ blog.author.profile.avatar.url }}" class="rounded-circle" height="36" width="36" alt="">
            <span>作者：{{ blog.author.profile.nickname|default:blog.author.username }}</span>
            <span>于：{{ blog.pub_time|date:"Y年m月d日 H时i分" }}</span>发布
            {% if user.is_authenticated and user == blog.author %}
                <button class="btn btn-sm btn-outline-danger ms-auto" id="delete-blog-btn">删除博客</button>
            {% endif %}
        </div>
        <hr>
        <div class="py-2">
            {{ blog.content|safe }}
        </div>
        <hr class="my-6 border-secondary">
        <div class="py-2">
            <h3>评论（{{ blog.comments.all|length }}）</h3>
            {% if user.is_authenticated %}
                <form action="{% url 'blog:pub_comment' %}" method="POST">
                    {% csrf_token %}
                    <input type="hidden" name="blog_id" value="{{ blog.id }}">
                    <div class="mt-2">
                        <input type="text" class="form-control" placeholder="善语结善缘，恶言伤人心" name="content">
                    </div>
                    <div class="text-end mt-2">
                        <button type="submit" class="btn btn-warning">发送</button>
                    </div>
                </form>
            {% else %}
                <div class="alert alert-info">
                    请<a href="{% url 'baiauth:login' %}">登录</a>后参与评论
                </div>
            {% endif %}
        </div>
    </div>
    <div class="mt-2">
        <ul class="list-group list-group-flush">
            {% for comment in blog.comments.all %}
                <li class="list-group-item mb-2">
                    <div class="d-flex justify-content-between text-body-secondary">
                        <div class="user-info">
                            <img src="{{ comment.author.profile.avatar.url }}" class="rounded-circle" width="40" height="40" alt="">
                            <span class="ms-2">{{ comment.author.profile.nickname|default:comment.author.username }}</span>
                        </div>
                        <div class="create-time"
                             style="line-height: 40px">{{ comment.pub_time|date:"Y年m月d日 H时i分" }}</div>
                    </div>
                    <div class="mt-2">{{ comment.content }}</div>
                </li>
            {% endfor %}
        </ul>
    </div>
    <script>
        hljs.highlightAll();
        document.getElementById('delete-blog-btn')?.addEventListener('click', function () {
            if (confirm('确定要删除这篇博客吗？此操作不可恢复！')) {
                const blogId = {{ blog.id }};
                const csrfToken = '{{ csrf_token }}';

                fetch(`/blog/delete/${blogId}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': csrfToken
                    }
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.code === 200) {
                            alert('删除成功');
                            window.location.href = data.data.redirect_url;
                        } else {
                            alert(data.message);
                        }
                    })
                    .catch(error => {
                        alert('删除失败，请重试');
                    });
            }
        });
    </script>
{% endblock %}